<template>
    <div class="container">
      <h1>订单列表</h1>
      <div v-if="loading" class="loading">加载中...</div>
  
      <!-- 订单列表 -->
      <ul v-if="!loading && orders.length" class="order-list">
        <li v-for="order in orders" :key="order.id" class="order-item">
          <div class="order-details">
            <i class="fas fa-receipt"></i>
            <span>订单ID: {{ order.id }}</span>
            <span>总计: {{ order.total_price }} 元</span>
            <span :class="`status-${order.order_status}`">{{ orderStatus[order.order_status] }}</span>
            <button @click="openFeedbackModal(order)">立即评价</button>
            <button @click="openOrderCommModal(order)">查看评价</button>
          </div>
        </li>
      </ul>
  
      <!-- 没有订单 -->
      <p v-else-if="!loading" class="no-orders">暂无已支付订单。</p>
  
      <!-- 错误消息 -->
      <p v-else class="error-message">加载失败，请重试。</p>
  
      <!-- 评价弹出框 -->
      <div v-if="showModal" class="modal-overlay">
        <div class="modal">
          <h2>订单评价</h2>
          <p>订单ID: {{ selectedOrder?.id }}</p>
  
          <!-- 评论内容输入框 -->
          <textarea v-model="feedback" placeholder="请输入您的评价..." rows="4"></textarea>
  
          <!-- 评论等级选择 -->
          <div class="rating">
            <label>
              <input type="radio" v-model="rating" value="1" /> 好评
            </label>
            <label>
              <input type="radio" v-model="rating" value="2" /> 中评
            </label>
            <label>
              <input type="radio" v-model="rating" value="3" /> 差评
            </label>
          </div>
  
          <div class="modal-actions">
            <button @click="submitFeedback">提交</button>
            <button @click="closeModal">取消</button>
          </div>
        </div>
      </div>
  
      <!-- 查看评价弹出框 -->
      <div v-if="showOrderCommModal" class="modal-overlay">
        <div class="modal">
          <h2>订单评价信息</h2>
          <p>订单ID: {{ selectedOrder?.id }}</p>
  
          <!-- 订单的所有评价列表 -->
          <ul>
            <li v-for="comment in orderComments" :key="comment.id">
              <div class="comment">
                <p>评价等级: {{ getRatingText(comment.grade) }}</p>
                <p>评价内容: {{ comment.comment }}</p>
              </div>
            </li>
          </ul>
  
          <div class="modal-actions">
            <button @click="closeOrderCommModal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  const orders = ref([]); // 订单列表
  const loading = ref(true); // 加载状态
  const error = ref(null); // 错误状态
  const user = ref(1); // 假设你在这里设置用户信息
  const orderStatus = {
    1: '未支付',
    2: '已支付',
    3: '已取消',
    4: '已超时',
  };
  
  const showModal = ref(false); // 控制评价弹框显示
  const showOrderCommModal = ref(false); // 控制查看评价弹框显示
  const selectedOrder = ref(null); // 当前选中的订单
  const feedback = ref(''); // 用户输入的评价内容
  const rating = ref(null); // 用户选择的评论等级
  const orderComments = ref([]); // 当前订单的所有评价
  
  // 获取订单列表
  const fetchOrders = async () => {
    loading.value = true;
    try {
      const response = await axios.get('http://127.0.0.1:8000/order/orderlist/', {
        params: { user: user.value } // 正确设置参数
      });
      orders.value = response.data.data;
    } catch (err) {
      console.error('获取订单失败:', err);
      error.value = '获取订单失败，请重试。';
    } finally {
      loading.value = false;
    }
  };
  
  onMounted(() => {
    fetchOrders(); // 组件挂载时获取订单
  });
  
  // 打开评价弹窗
  const openFeedbackModal = (order) => {
    selectedOrder.value = order;
    feedback.value = ''; // 清空已有的反馈
    rating.value = null; // 清空评论等级
    showModal.value = true;
  };
  
  // 关闭评价弹窗
  const closeModal = () => {
    showModal.value = false;
    selectedOrder.value = null;
    feedback.value = '';
    rating.value = null;
  };
  
  // 提交评价
  const submitFeedback = () => {
    if (feedback.value.trim() && rating.value) {
      console.log(`订单ID: ${selectedOrder.value.id} 的评价: ${feedback.value}, 评论等级: ${rating.value}`);
      axios.post('http://127.0.0.1:8000/order/ordercomm/', { order_id: String(selectedOrder.value.id), comment: feedback.value, grade: rating.value }).then((result) => {
        if (result.data.code == 200) {
          alert('评价成功！');
        } else {
          alert('评价失败，请重试。');
        }
      }).catch((err) => {
        console.error('提交评价失败:', err);
      });
      closeModal(); // 提交后关闭弹窗
    } else {
      alert('请输入评价内容并选择评论等级！');
    }
  };
  
  // 打开查看评价弹窗
  const openOrderCommModal = (order) => {
    selectedOrder.value = order;
    fetchOrderComments(order.id); // 获取该订单的所有评价
    showOrderCommModal.value = true;
  };
  
  // 获取订单的所有评价
  const fetchOrderComments = async (orderId) => {
    try {
      const response = await axios.get('http://127.0.0.1:8000/order/ordercommquy/', {
        params: { order_id: orderId }
      });
      if (response.data.code === 200) {
        console.log(response.data.data);
        
        orderComments.value = response.data.data; // 将返回的数据赋值给 orderComments
      } else {
        alert('获取订单评价失败，请重试。');
      }
    } catch (err) {
      console.error('获取订单评价失败:', err);
    }
  };
  
  // 关闭查看评价弹窗
  const closeOrderCommModal = () => {
    showOrderCommModal.value = false;
    orderComments.value = []; // 清空评价数据
  };
  
  // 获取评价等级的文字描述
  const getRatingText = (grade) => {
    switch (grade) {
      case "1": return '好评';
      case "2": return '中评';
      case "3": return '差评';
      // default: return '未知';
    }
  };
  </script>
  
  <style scoped>
  /* 主要样式 */
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: #f7f7f7;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }
  
  h1 {
    font-size: 2.2em;
    margin-bottom: 25px;
    text-align: center;
    color: #4A90E2;
    font-weight: bold;
  }
  
  .loading {
    text-align: center;
    font-size: 1.2em;
    color: #999;
  }
  
  .order-list {
    list-style-type: none;
    padding: 0;
  }
  
  .order-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
    transition: transform 0.3s, background-color 0.3s;
  }
  
  .order-item:hover {
    background-color: #f0f8ff;
    transform: translateY(-5px);
  }
  
  .order-details {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    color: #333;
  }
  
  .order-details span {
    margin-right: 10px;
  }
  
  .no-orders, .error-message {
    text-align: center;
    font-size: 1.2em;
    color: #888;
  }
  
  .error-message {
    color: #e74c3c;
  }
  
  .status-1 { color: #FF5733; } /* 未支付 - 红色 */
  .status-2 { color: #2ED573; } /* 已支付 - 绿色 */
  .status-3 { color: #FFC300; } /* 已取消 - 黄色 */
  .status-4 { color: #B1B1B1; } /* 已超时 - 灰色 */
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .order-item {
    animation: fadeIn ½s ease-in-out;
  }
  
  /* 弹出框样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    text-align: center;
  }
  
  .modal h2 {
    margin-bottom: 20px;
    color: #4A90E2;
  }
  
  .modal textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    margin-bottom: 20px;
  }
  
  .rating {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .rating label {
    display: block;
    font-size: 1.1em;
  }
  
  .modal-actions button {
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    background-color: #4A90E2;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  
  .modal-actions button:hover {
    background-color: #357ABD;
  }
  
  .fas {
    margin-right: 10px;
    font-size: ⅔em;
  }
  </style>
  